<template>
  <div class="edit-menu">
    <a-modal
      :title="'新增子参数（'+ name +'）'"
      width="900px"
      :visible="visibles"
      :confirm-loading="confirmLoading"
      :footer="null"
      :maskClosable="false"
      :bodyStyle="{ overflow: 'auto', maxHeight: '80vh' }"
      @cancel="handleCancel"
    >
      <s-table
        ref="table"
        size="default"
        :rowKey="record => record.Id"
        :columns="columns"
        :data="loadData"
        :scroll="{x: true}"
        showPagination="auto"
      >
        <template slot="tabAction">
          <a-button type="primary" icon="plus" @click="handleOperation('add', '', pid)">新增</a-button>
        </template>
        <span slot="serial" slot-scope="text, record, index">
          {{ index + 1 }}
        </span>
        <span slot="description" slot-scope="text">
          <ellipsis :length="8" tooltip>{{ text }}</ellipsis>
        </span>
        <span slot="status" slot-scope="text">
          <a-badge :status="text | statusTypeFilter" :text="text | statusFilter" />
        </span>
        <span slot="up" slot-scope="record">
          <a-tag @click="handleUp(record.Id)"><a-icon type="arrow-up" /></a-tag>
        </span>
        <span slot="down" slot-scope="record">
          <a-tag @click="handelDown(record.Id)"><a-icon type="arrow-down" /></a-tag>
        </span>

        <span slot="action" slot-scope="text, record">
          <template>
            <a @click="handleOperation('update', record.Id, pid)">修改</a>
            <a-divider type="vertical" />
            <a-popconfirm
              title="您确定是否删除当前参数?"
              ok-text="是"
              cancel-text="否"
              placement="bottomLeft"
              @confirm="handleRemove(record.Id)"
            >
              <a-icon slot="icon" type="question-circle-o" />
              <a href="#">删除</a>
            </a-popconfirm>
          </template>
        </span>
      </s-table>
      <child :visibles.sync="Addvisible" :propsData="propsData" :pid="pid" @refresh="handleRefresh"></child>
    </a-modal>
  </div>
</template>

<script>
import Child from './edit'
import { STable, Ellipsis } from '@/components'
import { getParameterList, delParameters, changeParameters } from '@/api/system'
const columns = [
  {
    title: '序号',
    align: 'center',
    scopedSlots: { customRender: 'serial' },
    width: 60
  },
  {
    title: 'ID',
    align: 'center',
    dataIndex: 'Id'
  },
  {
    title: '父ID',
    align: 'center',
    dataIndex: 'Fid'
  },
  {
    title: '参数键名',
    align: 'center',
    dataIndex: 'Csmc',
    width: 100,
    scopedSlots: { customRender: 'description' }
  },
  {
    title: '参数键值',
    align: 'center',
    dataIndex: 'ClassKey'
  },
  // {
  //   title: '排序',
  //   align: 'left',
  //   dataIndex: 'PmSort',
  //   width: '60px'
  // },
  {
    title: '状态',
    align: 'center',
    dataIndex: 'Mode',
    scopedSlots: { customRender: 'status' },
    width: 80
  },
  {
    title: '上移',
    align: 'left',
    width: 80,
    scopedSlots: { customRender: 'up' }
  },
  {
    title: '下移',
    align: 'left',
    width: 80,
    scopedSlots: { customRender: 'down' }
  },
  {
    title: '操作',
    align: 'center',
    dataIndex: 'action',
    width: 150,
    scopedSlots: { customRender: 'action' }
  }
]
const statusMap = {
  '0': {
    status: 'processing',
    text: '启用'
  },
  '-1': {
    status: 'default',
    text: '停用'
  }
}

export default {
  props: {
    visibles: {
      type: Boolean,
      default: false
    },
    pid: {
      type: Number,
      default: 0
    },
    name: {
      type: String,
      default: ''
    }
  },
  components: {
    STable,
    Ellipsis,
    Child
  },
  data () {
    this.columns = columns
    return {
      confirmLoading: false,
      Addvisible: false,
      form: this.$form.createForm(this, { name: 'parameterChild' }),
      propsData: {
        types: 'add',
        id: ''
      },
      queryParam: {
        Fid: this.pid,
        ClassKey: '',
        Csmc: ''
      },
      loadData: parameter => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        return getParameterList(requestParameters).then(res => {
          return res
        })
      }
    }
  },
  filters: {
    statusFilter (type) {
      return statusMap[type.toString()].text
    },
    statusTypeFilter (type) {
      return statusMap[type.toString()].status
    }
  },
  methods: {
    handleOperation (type, id, fid) {
      this.Addvisible = true
      this.propsData = { type, id, fid }
    },
    handleAddCancel () {
      this.Addvisible = false
      this.form.resetFields()
    },
    handleUp (ID) {
      changeParameters({ State: 'up', ParametersID: ID }).then(res => {
        if (res.code === 200) {
          this.$message.success('参数上移成功')
          this.$refs.table.refresh()
        } else {
          this.$message.error('参数上移失败')
        }
      }).catch((err) => {
        this.$message.error(err.message || '提交失败')
      })
    },
    handelDown (ID) {
      changeParameters({ State: 'down', ParametersID: ID }).then(res => {
        if (res.code === 200) {
          this.$message.success('参数下移成功')
          this.$refs.table.refresh()
        } else {
          this.$message.error('参数下移失败')
        }
      }).catch((err) => {
        this.$message.error(err.message || '提交失败')
      })
    },
    handleRemove (Id) {
      delParameters({ Id }).then((res) => {
        if (res.code === 200) {
          this.$refs.table.refresh()
          this.$message.success('参数删除成功', 2.5)
        } else {
          this.$message.error('参数删除失败, 请稍后重试', 2.5)
        }
      }).catch((err) => {
        this.$message.error(err.message || '提交失败')
      })
    },
    handleRefresh () {
      this.$refs.table.refresh()
    },
    handleCancel () {
      this.$emit('update:visibles', false)
    }
  }
}
</script>
